<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
  <div class="abstatic-height"></div>
     <div class="anly-app-container anly-outdoor-container calendar-list-container">
       <el-row>
         <div class="filter-withline line-with-verticl"><div class="line-with-verticl over-topline"></div>
           <div class="filter-wrap">
             <div class="filter-item">
               <el-radio v-model="radio" label="1" @change="toggleTime('1')" style="padding-left: 10px;">固定时间</el-radio>
             </div>
             <div class="filter-item">
               <div style="padding-left: 10px;">
                 <el-radio-group v-model="listDate.tag" :disabled="radio === '1' ? false : true" size="mini">
                   <el-radio-button label="0">今天</el-radio-button>
                   <el-radio-button label="1">昨天</el-radio-button>
                   <el-radio-button label="2">最近7天</el-radio-button>
                   <el-radio-button label="3">最近30天</el-radio-button>
                 </el-radio-group>
               </div>
             </div>
             <div class="filter-item">
               <el-radio v-model="radio" label="2" @change="toggleTime('2')" style="padding-left: 70px;">自定义时间</el-radio>
             </div>
             <div class="filter-item">
               <el-date-picker  size="mini" :picker-options="pickerBeginDateBefore" :disabled="radio === '2' ? false : true" v-model="listDate.dateStrs" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
             </div>
             <div class="filter-item">
               <el-button type="primary" style="margin:5px 0 5px 30px" size="mini" @click="handleFilter">确定</el-button>
             </div>
           </div>
         </div>
       </el-row>
         <el-container>
           <el-aside width="300px">
             <div class="aside-withline">
               <div class="wrap-with-halfboder"></div>
               <div class="list">
                 <p><i class="el-icon-caret-right"></i>隐患处理情况</p>
                 <div class="table_one" id="table_one" ref="tableoneo" style="height: 200px;"></div>
               </div>
               <div class="list">
                 <p style="padding: 50px 0 20px 29px;"><i class="el-icon-caret-right"></i>隐患类型分布</p>
                 <div class="table_two" id="table_two" ref="tabletwoo">
                 </div>
               </div>
             </div>
           </el-aside>
            <el-main style="height: 100%;text-align:left;overflow:auto;" class="anly-main">
              <div class="anly-main-wrap">
                <div class="wrap-with-halfboder"></div>
                <el-row>
                  <div class="list anly-main-chart">
                    <p><i class="el-icon-caret-right"></i>隐患变化趋势</p>
                    <div class="table_three" id="table_three" ref="tablethreeo">
                    </div>
                  </div>
                </el-row>
              </div>
            </el-main>

        </el-container>
     </div>
     </div>
</template>
<script>
import echarts from "echarts";
import {
  getRatioByDate,
  selectCountByType,
  selectFaultCountByMonth
} from "@/api/device/deviceFacilitiesAbnormal/index";

export default {
  data() {
    return {
      value: "",
      radio: "1",
      list: [],
      typeList: [],
      dayList: [],
      type: "",
      time: "",
      pickerBeginDateBefore:{
        disabledDate: time => {
          let _now = Date.now();
          let _nowbefore30day = new Date(_now - 1000 * 60 * 60 * 24 * 30);
          return time.getTime() > _now||time.getTime()<_nowbefore30day.getTime();
        }
      },
      listDate: {
        dateStrs: null,
        tag: "0",
        channelId: null
      },
      params: {
        channelId: ""
      },
      isnoneHandle: false,
      isnoneType: false,
      isnoneNum: false,
      pickerOptions: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let one = 30 * 24 * 3600 * 1000;
          let oneMonth = curDate - one;
          return time.getTime() > Date.now() || time.getTime() < oneMonth;
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.params.channelId = vm.$route.params.id;
      vm.toggleTime("1");
      vm.initChart1();
      vm.initChart2();
      vm.buildCount();
    },
    //消防给水隐患处理
    initChart1() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      getRatioByDate(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        let ayarr = [{value:res.data.count,name:'未处理'},
          {value:res.data.handleCount,name:'已处理'}];
        let stringarr = ['未处理','已处理'];
        var chart1 = echarts.init(this.$refs.tableoneo);
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{b} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            icon:'circle',
            right: '10',
            top:'center',
            textStyle: {
              color: 'rgba(80, 227, 194, 0.7)'
            },
            data: stringarr,
            color:['#50E3C2','#EB7E10'],
          },
          series: [
            {
              name:'',
              type: 'pie',
              radius: ['32%', '70%'],
              center: ['42%', '50%'],
              data:ayarr,
              color:['#50E3C2','#EB7E10'],
              label:{
                show: true,
                formatter: '{c}个',
              }
            },
            {
              type: 'pie',
              radius: ['32%', '70%'],
              center: ['42%', '50%'],
              data:ayarr,
              color:['#50E3C2','#EB7E10'],
              itemStyle: {
                normal:{
                  label:{
                    show : true,
                    position : 'inner',
                    formatter: '{d}%',
                    textStyle:{
                      color:'#ffffff'
                    }
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              }
            }
          ]
        };
        chart1.setOption(option);
      });
    },
    //消防给水隐患类型分布图
    initChart2() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      selectCountByType(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        if (!res.data || res.data.length === 0) {
          this.typeList = [];
          this.isnoneType = true;
        } else {
          this.isnoneType = false;
          this.typeList = res.data;
        }
        const type_arr = [];
        const dataStruct = [];
        for (let obj of this.typeList) {
          let alarmType = obj.alrmType;
          dataStruct.push({ value: obj.count, name: alarmType }); //重新组成对象
          type_arr.push(alarmType);
        }
        var chart2 = echarts.init(this.$refs.tabletwoo);
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer:{
              type: 'shadow'
            }
          },
          grid:{
            left:'3%',
            right:'4%',
            bottom:'3%',
            top:'3%',
            containLabel: true
          },
          xAxis: {
            color:'#fff',
            splitLine : {//去掉网格线
              show : true,
              lineStyle:{
                color:'rgba(80, 227, 194, 0.3)',
                type:'dashed'
              }
            },
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel : {//坐标轴刻度标签的相关设置
              show : true,
              textStyle : {
                color : 'rgba(80, 227, 194, 0.3)',
                align : 'right',
                fontSize: 12
              }
            },
            axisLine : {
              lineStyle : {
                color : 'rgba(80, 227, 194, 0.3)'
              }
            },
            axisTick : {
              lineStyle : {
                color : 'rgba(80, 227, 194, 0.3)'
              }
            },
          },
          yAxis: {
            type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
            data: type_arr,
            axisLabel : {
              show : true,
              textStyle : {
                color : 'rgba(80, 227, 194, 0.7)',
                align : 'right',
                fontSize: 12    /*文字大小*/
              }
            },
            axisLine : {
              lineStyle : {
                color : 'rgba(80, 227, 194, 0.3)'//轴的颜色
              }
            },
            axisTick : {
              lineStyle : {
                color : 'rgba(80, 227, 194, 0.3)'//轴上点的颜色
              }
            },

          },
          series : [
            {
              name:'',
              type: 'bar',
              data:dataStruct,
              label : {
                normal : {
                  show : true,//显示数字
                  position : 'right',
                  textStyle : {
                    fontSize : '14',//柱状上的显示的文字
                    color:'#50E3C2'
                  }
                }
              },
              barWidth : 30,//柱子宽度
              itemStyle: {
                normal: {
                  color:new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: 'rgba(80, 227, 194, 0)'},
                      {offset: 1, color: '#3DA996'}
                    ]
                  )
                }
              }
            }
          ]
        };
        chart2.setOption(option);
      });
    },
    //消防给水隐患数量变化趋势
    buildCount() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }


      selectFaultCountByMonth(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {

        this.isnoneNum = !res.data || res.data.length == 0 ? true : false;
        const count_arr = [];
        const dataStruct = [];
        for (let obj of res.data) {
          dataStruct.push(obj.date.replace("2018-", "").replace("-", "/"));
          count_arr.push(obj.count);
        }
        var chart3 = echarts.init(this.$refs.tablethreeo);
        var option = {
          grid:{
            left:60,
            right:40,
            bottom:20,
            top:50
          },
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: dataStruct,
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              }
            }
          ],
          yAxis: [
            {
              name: "单位：起",
              type: "value",
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  color:'rgba(80, 227, 194, 0.3)'
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
          ],
          series: [
            {
              // name: "value",
              type: "line",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "top"
                }
              },
              itemStyle: {
                normal: {
                  // 改变区域颜色
                  // color: "#fff"
                }
              },
              areaStyle: { normal: {} },
              data: count_arr
            }
          ]
        };
        chart3.setOption(option);
      });
    },
    handleFilter() {
      this.initChart1();
      this.initChart2();
      this.buildCount();

    },
    toggleTime(value) {
      if (value == "1") {
        this.listDate.dateStrs = undefined;
        this.listDate.tag = "3";
      } else {
        this.listDate.tag = undefined;
      }
      this.radio = value;
    }
    //    setData (value) {
    //      this.listDate.channelId = value;
    //    }
  }
};
</script>
<style lang="scss">
.anly-outdoor-container {
  padding-top: 0;
  .filter-container {
    display: flex;
    justify-content: space-between;
    .title {
      color: rgb(129, 128, 128);
    }
  }
  .main_box {
    width: 880px;
    margin: 0 auto;
    .list {
      margin-top: 50px;
      width: 100%;
      position: relative;
      .right {
        color: #999;
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 50px;
      }
    }
  }
  .table_one {
    width: 100%;
  }
  .none-data {
    width: 100%;
    height: 209px;
    position: absolute;
    top: calc(18px + 1em);
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
    line-height: 209px;
  }
  .table_two,
  .table_three {
    height: 209px;
    width: 100%;
  }
  .el-aside {
    height: 800px;
    padding: 22px 0;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 265px;
    margin-left: 10px;
  }
}
.anly-app-container {
  padding-top: 0;
  padding-left: 27px;
  padding-right: 27px;
  .filter-withline{
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline{
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
  }
  .filter-wrap{
    display: flex;
    align-items: center;
    .filter-item{
      .el-radio-button__orig-radio:checked + .el-radio-button__inner{
        background: rgba(0, 0, 0, 0.3);
      }
      .el-radio-button__inner{
        border-left: 1px solid rgba(80, 227, 194, 0.3) !important;
        border-radius: 0;
        font-weight: normal;
      }
      .el-radio-button:first-child .el-radio-button__inner{
        border-left: 0 !important;
      }
    }
  }
  .aside-withline{
    position: relative;
    height: 720px;
    background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
    color: #50E3C2;
    .list{
      padding-top:12px;
      &>p{
        padding-left: 29px;
        margin: 0;
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .handle-defect{
    width: 100%;
    height: 200px;
  }
  .table_two,.table_three {
    width: 100%;
  }
  .table_two{
    height: 209px;
  }
  .anly-main{

    .anly-main-wrap{
      min-height: 720px;
      background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
      position: relative;
      .filter-result-wraplist{
        display: flex;
        padding: 40px 20px 20px 22px;
        &>div{
          flex: 1;
        }
        .filter-result-left{
          margin-right: 50px;
        }
      }
    }
    .anly-main-chart{
      margin: 0 20px;
    }
    .list{
      color: #50E3C2;
      &>p{
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .el-aside {
    height: 800px;
    padding: 22px 0;
  }
  .el-date-editor--daterange.el-input__inner{
    width: 265px;
    margin-left: 10px;
  }
}
</style>



